<template>
  <view class="content padd20">
    <view class="zjsc">
      银行卡信息填写
    </view>
    <view class="box-content">
      <view class="qrsf">
        <view class="sjxx">
          <view class="uni-form-item">
            <view class="title wd220"><span style="color:red;">*</span>姓名</view>
            <input class="uni-input" v-model="driverInfo.name" maxlength="50" />
          </view>
          <view class="uni-form-item">
            <view class="title wd220"><span style="color:red;">*</span>身份证号</view>
            <input class="uni-input" v-model="driverInfo.idNo" maxlength="50" />
          </view>
          <view class="uni-form-item">
            <view class="title wd220"><span style="color:red;">*</span>银行名称</view>
            <view class="uni-select-box">
              <!-- <picker @change="confirmChange" :value="accountValue" mode="selector" :range="accountRange" range-key="text">
						<view class="uni-input" style="text-indent: 15rpx;">{{accountValue}}</view>
					    </picker> -->
              <view class="uni-input" @click="showPop" style="text-indent: 15rpx;">{{accountValue}}</view>
              <uni-icons type="forward" size="20"></uni-icons>
            </view>
            <!-- <uni-data-select style="width: 475rpx;" class="net-selct-box" v-model="accountValue" :localdata="accountRange" @change="changeAccount"></uni-data-select> -->
          </view>
          <view class="uni-form-item">
            <view class="title wd220"><span style="color:red;">*</span>银行预留手机号</view>
            <input style="width: 475rpx;" class="uni-input" v-model="bandCardData.mobile" />
          </view>
          <view class="uni-form-item">
            <view class="title wd220"><span style="color:red;">*</span>银行卡号</view>
            <input style="width: 475rpx;" class="uni-input" v-model="bandCardData.cardNumber" />
          </view>
        </view>
      </view>
    </view>
    <view class="btns">
      <button type="primary" @click.native="bandCardAddSubmit">提交</button>
    </view>
    <uv-picker ref="selectBoxPop" :confirmColor="curColor" :columns="accountRange" keyName="label"
      @confirm="confirmPop"></uv-picker>
  </view>
</template>

<script>
  import { getDriving, getDictDatas } from '@/api/me.js';
  import { addCard } from '@/api/system/bank.js';
  import { dictTansParams } from '@/utils/common.js';
  import { toast } from '@/utils/common';
  import config from '@/config'
  export default {
    data() {
      return {
        accountValue: undefined,
        accountRange: [],
        driverInfo: {
          name: '',
          idNo: ''
        },
        bandCardData: {
          bankName: '',
          mobile: '',
          cardNumber: '',
        },
        type: '',
        goBackToRecieve: false
      };
    },
    computed: {
      curColor() {
        return this.$store.state.user.curTypeColor
      }
    },
    onLoad(options) {
      this.type = options.types
      this.getUserInfor()
      //获取字典
      this.getLicenseTypeDict()
    },
    methods: {
      showPop() {
        this.$refs['selectBoxPop'].open('bottom');
      },
      confirmPop(e) {
        if (this.accountRange.length > 0) {
          this.accountValue = e.value[0].label
          this.bandCardData.bankName = e.value[0].label
        }
      },
      async getLicenseTypeDict() {
        let datas = await getDictDatas()
        this.accountRange = [datas.data.filter(e => e.dictType === 'bank_name')]
        console.log('accountRange', this.accountRange)
      },
      changeAccount(res) {
        this.accountRange.forEach(item => {
          if (item.value == res) this.bandCardData.bankName = item.text
        })
      },
      //获取司机用户信息
      async getUserInfor() {
        try {
          let res = await getDriving();
          if (res.code == 0) {
            console.log('实名后再次获取司机信息: ', res);
            if (!!res.data) {
              this.driverInfo.name = res.data.driverName
              this.driverInfo.idNo = res.data.idNo && (res.data.idNo.slice(0, 3) + '****' + res.data.idNo.slice(-3))
            }
          }
        } catch (e) {
          return false;
        }
      },
      //新增
      async bandCardAddSubmit() {
        uni.showLoading({
          title: "正在提交..."
        })
        if (!this.bandCardData.bankName) {
          toast(`请填写银行名称`)
          return
        }
        if (!this.bandCardData.mobile) {
          toast(`请填写银行预留手机号`)
          return
        } else {
          if (!/^\d{11}$/.test(this.bandCardData.mobile)) {
            toast(`请输入正确手机号`)
            return
          }
        }
        if (!this.bandCardData.cardNumber) {
          toast(`请填写银行卡号`)
          return
        } else {
          // if(this.bandCardData.cardNumber.length < 16 || this.bandCardData.cardNumber.length > 19){
          if (!/^\d{16,19}$/.test(this.bandCardData.cardNumber)) {
            toast(`请输入正确银行卡号`)
            return
          }
        }
        let data = this.bandCardData
        try {
          let res = await addCard(data);
          if (res.code == 0) {
            setTimeout(() => {
              wx.hideLoading()
              uni.showToast({
                title: `新增成功`
              });
            }, 100);
            setTimeout(() => {
              if (this.type === 'code') {
                this.$tab.reLaunch('/pages/receivingNet?codes=true');
              } else {
                uni.navigateBack({
                  delta: 1
                });
              }
            }, 200);
          } else {
            setTimeout(() => {
              wx.hideLoading()
              toast(res.msg);
            }, 1000);
          }

        } catch (e) {
          return false;
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    overflow: initial;
  }
</style>